import React, { PureComponent } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import { Row, Col, Form, Card, Icon, List, Tooltip, Input, DatePicker, Button } from 'antd';

import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import StandardFormRow from '../../components/StandardFormRow';

import styles from './index.less';

const FormItem = Form.Item;

@Form.create()
@connect(state => ({
  ...state.space,
}))
export default class SpaceManage extends PureComponent {
  render() {
    const { RangePicker } = DatePicker;
    const dateFormat = 'YYYY/MM/DD';

    const fakeList = [
      {
        id: 1,
        title: '腾讯众创空间',
        address: '南二环西段101号',
        avatar: 'avatar',
        type: '众创空间',
        admin: '管理员',
        joinAt: '2017-12-12',
      }, {
        id: 2,
        title: '环大众创空间',
        address: '南二环西段101号',
        avatar: 'avatar',
        type: '众创空间',
        admin: '管理员',
        joinAt: '2017-12-12',
      }, {
        empty: true,
        id: 12,
      },
    ];

    const formItemLayout = {
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    const loading = false;
    const { getFieldDecorator } = this.props.form;
    const CardInfo = ({ id, type, admin, joinAt }) => (
      <div className={styles.cardInfo}>
        <div>
          <p>ID</p>
          <p>{id}</p>
        </div>
        <div>
          <p>类型</p>
          <p>{type}</p>
        </div>
        <div>
          <p>管理员</p>
          <p>{admin}</p>
        </div>
        <div>
          <p>加入时间</p>
          <p>{joinAt}</p>
        </div>
      </div>
    );

    return (
      <PageHeaderLayout
        title="场地管理"
      >
        <div className={styles.filterCardList}>
          <Card bordered={false}>
            <Form layout="inline">
              <StandardFormRow
                title="查询时间"
                grid
                last
              >
                <Row gutter={16}>
                  <Col lg={6} md={10} sm={10} xs={24}>
                    <RangePicker
                      defaultValue={[moment('2017/12/11', dateFormat), moment('2018/4/01', dateFormat)]}
                      format={dateFormat}
                    />
                  </Col>
                  <Col lg={6} md={10} sm={10} xs={24}>
                    <FormItem
                      {...formItemLayout}
                      label="搜索名称"
                    >
                      {getFieldDecorator('rate')(
                        <Input
                          onChange={this.handleFormSubmit}
                          placeholder="请输入"
                          style={{ maxWidth: 200, width: '100%' }}
                        />
                      )}
                    </FormItem>
                  </Col>
                  <Col lg={4} md={2} xs={2}>
                    <Button>筛选</Button>
                    <Button>添加场地</Button>
                  </Col>
                </Row>
              </StandardFormRow>
            </Form>
          </Card>
          <List
            rowKey="id"
            style={{ marginTop: 24 }}
            grid={{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }}
            loading={loading}
            dataSource={fakeList}
            renderItem={item => (
              item.empty ? (
                <List.Item key={item.id}>
                  <Card hoverable bodyStyle={{ height: '100%' }}>
                    <Icon type="plus" />
                  </Card>
                </List.Item>
              )
              : (
                <List.Item key={item.id}>
                  <Card
                    hoverable
                    bodyStyle={{ paddingBottom: 20 }}
                    actions={[
                      <Tooltip title="编辑"><Icon type="edit" /></Tooltip>,
                      <Tooltip title="删除"><Icon type="delete" /></Tooltip>,
                  ]}
                  >
                    <Card.Meta
                      title={item.title}
                    />
                    <div className={styles.cardItemContent}>
                      <CardInfo {...item} />
                    </div>
                  </Card>
                </List.Item>)
            )}
          />
        </div>
      </PageHeaderLayout>
    );
  }
}
